import React from "react";
import { Form, Input, Button, Checkbox, Typography, message, Card } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";

const { Title } = Typography;

interface LoginPageProps {
  isMobile: boolean;
  onLogin: (userInfo: any) => void;
}

export default function LoginPage({ isMobile, onLogin }: LoginPageProps) {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleLogin = (values: any) => {
    if (values.username === "张三" && values.password === "123456") {
      const userInfo = {
        name: "张三",
        phone: "138****1234",
        email: "zhangsan@bjtu.edu.cn",
        points: 1280,
        level: "黄金会员"
      };
      onLogin(userInfo);
      message.success("登录成功！");
      navigate("/");
    } else {
      message.error("用户名或密码错误！");
    }
  };

  return (
    <div style={{ 
      display: "flex", 
      justifyContent: "center", 
      alignItems: "center", 
      minHeight: "100vh",
      padding: isMobile ? "16px" : "24px",
      background: "#f0f2f5"
    }}>
      <Card 
        bordered={false}
        style={{ 
          width: isMobile ? "100%" : 400,
          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
          borderRadius: 8
        }}
      >
        <div style={{ textAlign: "center", marginBottom: 24 }}>
          <Title level={3}>用户登录</Title>
        </div>
        
        <Form
          form={form}
          name="login_form"
          initialValues={{ remember: true }}
          onFinish={handleLogin}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名!' },
              { pattern: /^[\u4e00-\u9fa5]{2,6}$/, message: '请输入2-6位中文姓名' }
            ]}
          >
            <Input 
              prefix={<UserOutlined />} 
              placeholder="请输入用户名" 
              size="large"
              allowClear
            />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[
              { required: true, message: '请输入密码!' },
              { min: 6, message: '密码长度至少6位' }
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
              size="large"
              allowClear
            />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked">
            <Checkbox>记住我</Checkbox>
          </Form.Item>

          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              block
              size="large"
              style={{ marginBottom: 12 }}
            >
              登录
            </Button>
            <div style={{ textAlign: "center", color: "#999", fontSize: 13 }}>
              提示：使用用户名 "张三"，密码 "123456" 登录
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}